<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script src="../../js/react.development.js"></script>
    <script src="../../js/react-dom.development.js"></script>
    <script src="../../js/babel.min.js"></script>


    <script type="text/babel">

        //03  受控组件和非受控组件
        // props / state => 组件视图渲染
        // 组件 受 状态和props 变化控制=>受控组件  特点: 数据驱动=>不用操作DOM (内部操作DOM)
      /*  class App extends React.Component {

            state = { name: 'zhagnsan', age: 18, single: false, desc: 'info', hobby: 'playing' }


            // input : 两个方向 
            // input =>state onChange 事件绑定
            // state =>input value 属性绑定

            //事件
            handleChange1 = (e) => {
                console.log('handleChange');
                //事件对象=>获取 input 值
                console.log(e.target.value);
                //同步
                this.setState({
                    name: e.target.value
                })
            }

            handleChange2 = (e) => {
                console.log(e.target.value);
                this.setState({ age: e.target.value })
            }

            handleChange3 = (e) => {
                console.log(e.target.checked);
                this.setState({ single: e.target.checked })
            }

            handleChange4 = (e) => {
                console.log(e.target.value);
                this.setState({ desc: e.target.value })
            }

            handleChange5 = (e) => {
                console.log(e.target.value);
                this.setState({ hobby: e.target.value })
            }

            handleChange=(e)=>{
                // value
            }

            handleSubmit = (e) => {
                console.log(this.state);
                // 阻止默认行为
                e.preventDefault()
            }

            render() {
                return (
                    <form onSubmit={this.handleSubmit}>
                        name:<input type="text" value={this.state.name} onChange={this.handleChange1} />
                        age:<input type="number" value={this.state.age} onChange={this.handleChange2} />
                        single:<input type="checkbox" value={this.state.single} onChange={this.handleChange3} />
                        desc:<textarea value={this.state.desc} onChange={this.handleChange4} />

                        <select value={this.state.hobby} onChange={this.handleChange5}>
                            <option value="eatting">吃</option>
                            <option value="playing">玩</option>
                            <option value="sleeping">睡</option>
                        </select>
                        <input type="submit" value="commit" />
                    </form>
                )
            }
        }  */


        class App extends React.Component {

            state = { name: '', age: 18, single: false, desc: '', hobby: 'playing' }

            //事件
           
            handleChange=(e)=>{
                // value 不同 key 不同 
                // 往一个对象里面动态追加数据的方法 : es6 计算属性名称
                // var o ={}
                // o.name = 'lisi'
                // o.age = 21

                // obj[key] = value

                // let value  = e.target.value
                // let key  = e.target.name

                let target = e.target
                // console.log(target);
                // console.log(target.value);
                // console.log(target.name);
                // console.log(target.type);

                let type = target.type
                let name = target.name
                let value = type=='checkbox'?target.checked : target.value
           
                this.setState({
                    [name]:value  // Object.assign({},{name:'lisi'},{age:21},..)
                })
            }

            handleSubmit = (e) => {
                console.log(this.state);
                // 阻止默认行为
                e.preventDefault()
            }

            render() {
                return (
                    <form onSubmit={this.handleSubmit}>
                        name:<input type="text" name='name' value={this.state.name} onChange={this.handleChange} />
                        age:<input type="number" name='age' value={this.state.age} onChange={this.handleChange} />
                        single:<input type="checkbox" name='single' value={this.state.single} onChange={this.handleChange} />
                        desc:<textarea  name='desc' value={this.state.desc} onChange={this.handleChange} />

                        hobby:<select name='hobby' value={this.state.hobby} onChange={this.handleChange}>
                            <option value="eatting">吃</option>
                            <option value="playing">玩</option>
                            <option value="sleeping">睡</option>
                        </select>
                        <input type="submit" value="commit" />
                    </form>
                )
            }
        }

        // 组件 不受 状态和props 变化控制=>非受控组件  特点: 可以直接操作DOM (类似于传统的html 表单操作) ; ref

        ReactDOM.render(<App />, document.getElementById('app'))
    </script>
</body>

</html>